<template>
	<om-page :title="pageTitle">
		<view class="video-info">
			<view class="video-info-videocont">
				<view class="video-info-img"><image class="img" :src="videoUrl"></image></view>
				<view class="video-info-container">
				    <view class="video-info-tit">{{ dataInfo.videoType }}</view>
				    <view class="video-info-cont"><b>课时：</b><em>{{ dataList.length }}</em>集</view>
				    <view class="video-info-des"><b>课程简介：</b>{{ dataInfo.videoTypeInfo }}</view>
				</view>
			</view>
			<view class="video-info-videolist">
				<view v-for="(item, index) in dataList" :key="index" class="video-info-item" :class="item.progressClass" @click="gotoVideo(item, index)">
					<view class="video-info-name">
						<view class="bg"></view>
						<view class="tit">第{{ item.orderNumber }}课</view>
					</view>
					<view class="video-info-num">已播<em>{{ item.videoBrowseTimes }}</em>次</view>
					<view class="video-info-num">已看<em>{{ item.learnedUserNums }}</em>人</view>
					<view class="video-info-time">时长<em>{{ item.videoDuration }}</em></view>
					<view class="video-info-progress">进度<em>{{ item.videoProgress }}</em>%</view>
				</view>
			</view>
		</view>
	</om-page>
</template>

<script>
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	const app = getApp();
	export default {
		data() {
			return {
				pageTitle:"分类详细",
				dataInfo: {},
				dataList: [],
				videoUrl: '',
				videoTypeId: '',
			}	
		},
		computed: {
			...mapState(useLoginUserStore, ['userId', 'userName'])
		},
		methods: {
			gotoVideo(item, index){
				let _that = this;
				_that.om.request('videoRecord/updateBrowsedNums', {
					videoRecordId: item.id
				}, 'get').then(res => {
					uni.navigateTo({
						url: "/pages/mine/video/video-webplay?id="+item.id
					});
				})
			},
			getVideoTypeInfos(){
				let _that = this;
				_that.om.request('videoRecord/getVideoTypeInfos', {
					videoTypeId: _that.videoTypeId
				}, 'get').then(res => {
					_that.dataInfo = res.value.videoType
					_that.dataList = res.value.videoRecords
					
					if(_that.dataInfo.uploadFileData){
						let url = _that.dataInfo.uploadFileData.filePath.substring(11);
						_that.videoUrl = getApp().globalData.url+url.replace('\\','/')+'/'+_that.dataInfo.uploadFileData.fileSaveName;
					}else{
						_that.videoUrl = ''
					}
					
					
					for(let i=0; i<_that.dataList.length; i++){
						if(_that.dataList[i].videoRecordUsers){
							_that.dataList[i].videoProgress = parseInt((_that.dataList[i].videoRecordUsers.videoBrowseSeconds/parseInt(_that.dataList[i].videoSeconds)*100))
							if(_that.dataList[i].videoRecordUsers.browseFlag){
								_that.dataList[i].progressClass = 'end'
							}else{
								_that.dataList[i].progressClass = 'between'
							}
						}else{
							_that.dataList[i].videoProgress = 0;
						}
					}
					
				});
			}
		},
		onLoad(e) {
			let _that = this;
			_that.videoTypeId = e.id;
		},
		onShow(e) {
			let _that = this;
			_that.getVideoTypeInfos()
		}
	};
</script>

<style lang="scss" scoped>
	em{
		color: #FD001A;
		font-style: normal;
	}
	.video-info{
		padding: 12px 15px;
		overflow: hidden;
		.video-info-videocont{
			display: flex;
			flex-direction: row;
			flex: 1;
			position: relative;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.video-info-img{
				flex-direction: row;
				justify-content: center;
				align-items: flex-start;
				margin-right: 10px;
				.img{
					width: 115px;
					height: 71px;
				}
			}
			.video-info-container{
				// display: flex;
				// flex: 1;
				overflow: hidden;
				// flex-direction: column;
				color: #3b4144;
				.video-info-tit{
					width: 100%;
					font-size: 20px;
					font-weight: bold;
					color: #3b4144;
					line-height: 26px;
				}
				.video-info-cont{
					
				}
				.video-info-desc{
					font-size: 14px;
					text-align: justify;
					text-justify: inter-ideograph;
					color: #444444;
				}
			}
		}
		.video-info-videolist{
			.video-info-item{
				float: left;
				margin: 0 12px 10px 0;
				width: calc(30% - 12px);
				height: 112px;
				overflow: hidden;
				font-size: 12px;
				.video-info-name{
					position: relative;
					font-size: 14px;
					width: 100%;
					height: 36px;
					line-height: 36px;
					text-align: center;
					border-radius: 4px;
					border: 1px solid #ebeef5;
					background: #F7F7F7;
					transition: .3s;
					box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
					margin-bottom: 5px;
					.bg{
						position: absolute;
						right: 8px;
						top: 0;
						width: 24px;
						height: 100%;
						background: url(@/static/images/others/play.png) no-repeat center center;
						// opacity: 1;
						background-size: 24px 24px;
					}
					.tit{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						padding: 0 30px 0 8px;
						box-sizing: border-box;
						text-align: left;
					}
				}
				.video-info-num{
					
				}
				.video-info-time{
					
				}
				.video-info-progress{
					
				}
			}
			.video-info-item.between{
				.video-info-name{
					background: #EB5836;
					color: #FFF;
				}
			}
			.video-info-item.end{
				.video-info-name{
					background: #2e88d8;
				}
			}
			.video-info-item:nth-child(4n){
				margin-right: 0;
			}
		}
	}
</style>                                                  